<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>点餐系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="js/jquery-2.1.0.min.js"></script>
</head>

<body>
    <div id="app">

        <v-navigation-drawer v-model="drawer" app>
            <!-- 左侧未登录提示 -->
            <v-list dense v-show="!login.isLogin">
                <v-list-item link v-on:click="reg.showRegister=true">
                    <v-list-item-action>
                        <v-icon>mdi-account-plus</v-icon>
                    </v-list-item-action>
                    <v-list-item-content >
                        <v-list-item-title>用户注册</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="login.showLoginDialog=true">
                    <v-list-item-action>
                        <v-icon>mdi-login</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>登陆</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="admin">
                    <v-list-item-action>
                        <v-icon>mdi-login</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>管理员登陆</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>

            <!-- 欢迎信息和系统菜单 -->
            <v-list dense v-show="login.isLogin">
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-account</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>{{login. inputUsername}} 您好!</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link @click="status = 'dishesPage'">
                    <v-list-item-action>
                        <v-icon>mdi-cart-outline</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>我要点菜</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link @click="myOrderList">
                    <v-list-item-action>
                        <v-icon>mdi-cart-outline</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>我的订单</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item @click="logout">
                    <v-list-item-action>
                        <v-icon>mdi-logout</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>退出登陆</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app>
            <!-- 点餐页面 -->
            <v-app-bar app color="indigo" dark>
                <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
                <v-toolbar-title>点餐系统</v-toolbar-title>
            </v-app-bar>
            <v-content>
                <v-simple-table v-show="status == 'dishesPage' && login.isLogin">
                    <template v-slot:default>
                        <thead>
                            <tr>
                                <th class="text-left">菜名</th>
                                <th class="text-left">价格</th>
                                <th class="text-left">选择</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="dish in dishes">
                                <td>
                                    <v-icon>mdi-food</v-icon>
                                    {{dish.name}}
                                </td>
                                <td>
                                    <v-icon>mdi-cash</v-icon>
                                    {{dish.price}}
                                </td>
                                <td>
                                    <v-switch v-model="dish.isSelected"></v-switch>
                                </td>
                            </tr>
                        </tbody>
                    </template>
                </v-simple-table>
                <v-row v-show="status == 'dishesPage' && login.isLogin">
                    <v-col :col="11">
                        <div class="pa-2">已点 {{selectedDishCount}} 道菜, 总计 {{selectedDishPrice}} 元</div>
                    </v-col>
                    <v-col :cols="2">
                        <v-btn color="primary" block @click="dishsubmit">下单</v-btn>
                    </v-col>
                </v-row>

                <!-- 个人订单列表 -->
                <v-simple-table v-show="status == 'ordersPage' && login.isLogin">
                    <template v-slot:default>
                        <thead>
                            <tr>
                                <th class="text-left">序号</th>
                                <th class="text-left">用户</th>
                                <th class="text-left">状态</th>
                                <th class="text-left">时间</th>
                                <th class="text-left">详情</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in orders" >
                                <td>{{item.id}}</td>
                                <td>{{login.inputUsername}}</td>
                                <td>{{item.status==0?'未完成':'完成'}}</td>
                                <td>{{item.createtime}}</td>
                                <td>
                                    <v-btn color='primary' @click="orderDetail(item.id)">查看详情</v-btn>
                                </td>
                            </tr>
                        </tbody>
                    </template>
                </v-simple-table>

                <v-row v-show="!login.isLogin">
                    <v-col>
                        <v-card class="pa-2 text-center">请先登陆!</v-card>
                    </v-col>
                </v-row>

                <!-- 登录窗口 -->
                <v-row justify="center">
                    <v-dialog v-model="login.showLoginDialog" persistent max-width="400px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">登陆</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="用户名*" v-model="login.inputUsername" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="密码*" v-model="login.inputPassword" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="doLogin">登陆</v-btn>
                                        </v-col>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="login.showLoginDialog = false">取消
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                </v-row>

                <!-- 注册窗口 -->
                <v-row justify="center">
                    <v-dialog v-model="reg.showRegister" persistent max-width="400px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">注册</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="用户名*" v-model="reg.name" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="密码*" v-model="reg.password" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="确认密码*" v-model="reg.password2" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="doRegister">注册</v-btn>
                                        </v-col>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="reg.showRegister = false">取消
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                </v-row>

                <!-- 某个订单的详情 -->
                <v-row justify="center">
                    <v-dialog v-model="showCurOrder" persistent max-width="600px">
                        <v-simple-table>
                            <template v-slot:default>
                                <thead>
                                    <tr>
                                        <th class="text-left">菜品</th>
                                        <th class="text-left">价格</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="dish in curOrder">
                                        <td>{{dish.dish.name}}</td>
                                        <td>{{dish.dish.price}}</td>
                                    </tr>
                                    <tr>
                                        <td>总金额：{{curOrderMoney()}}</td>
                                        <td>
                                            <v-btn color="primary" v-on:click="showCurOrder = false">关闭</v-btn>
                                        </td>
                                    </tr>
                                </tbody>
                            </template>
                        </v-simple-table>
                    </v-dialog>
                </v-row>
            </v-content>
        </v-app>
    </div>


    <script>
        let app = new Vue({
            el: '#app',
            data: {
                drawer: null,
                status: 'dishesPage', // 取值为: ordersPage, dishesPage
                // 用于辅助实现登陆
                login: {
                    isLogin: false,
                    showLoginDialog: false,
                    inputUsername: "",
                    inputPassword: "",
                },
                // 注册相关参数定义
                reg: {
                    showRegister: false,
                    name: "",
                    password: "",
                    password2: ""
                },
                user: {
                    name: ""
                },
                dishes: [],
                orders: [],
                // 辅助实现订单显示详情
                showCurOrder: false,
                curOrder: {}
            },
            methods: {
                //转向管理员登陆
                admin(){
                    location.href='./admin.html'
                },
                // 登录方法
                doLogin(){
                    if(this.login.inputUsername.trim()==""){
                        alert("请输入用户名");
                    }
                    else if(this.login.inputPassword.trim()==""){
                        alert("请输入密码");
                    }
                    else{
                        jQuery.getJSON("/user/login",
                            {"name":this.login.inputUsername,
                            "password":this.login.inputPassword},
                        function (result) {
                            if (result!=null&&result.status==0){
                                app.login.inputPassword=""
                                app.login.isLogin=true
                                //隐藏登陆窗体
                                app.login.showLoginDialog=false
                                alert("登录成功");
                                //获取菜单列表
                                jQuery.getJSON("/dish/list",
                                    {},
                                function (result) {
                                    if (result!=null&&result.status==0){
                                        app.dishes=result.data;
                                    }
                                    else
                                        alert(result.message)

                                })
                            }else
                                alert(result.message)


                        })

                    }

                },
                // 注册方法
                doRegister(){
                    if(this.reg.name.trim()==""){
                        alert("请输入用户名");
                    }
                    else if(this.reg.password.trim()==""){
                        alert("请输入密码");
                    }
                   else if(this.reg.password2.trim()==""){
                        alert("请输入确认密码");
                    }
                   else if (this.reg.password2!=this.reg.password){
                       alert("密码输入不一致")
                    }
                   else{
                       jQuery.getJSON("/user/reg",
                           {"name":this.reg.name,
                           "password":this.reg.password},
                       function (result) {
                           if (result.status==0&&result.data>0){
                               app.reg.showRegister=false;
                               app.reg.name="";
                               app.reg.password="";
                               app.reg.password2="";
                               alert("注册成功")
                           }
                           else
                               alert(result.message)

                       })
                    }

                },
                //下单提交
                dishsubmit(){
                    if (confirm("确认提交？")){
                        var dids=""
                        app.dishes.forEach(dish => {
                            if (dish.isSelected) {
                                dids+=dish.id+","
                            }
                        });
                        if (dids!=""){
                            jQuery.getJSON("/order/add",
                                {"dids":dids},
                            function (result) {
                                if (result!=null&&result.status==0){
                                    alert("下单成功")
                                } else
                               alert(result.message)
                            })
                        }else
                            alert("请先选择菜")
                    }
                },
                //是否登录
                isLogin(){
                    jQuery.getJSON("/user/islogin",{},
                    function (result) {
                        if (result!=null&&result.status==0){
                            app.login.isLogin=true
                            app.login.inputUsername=result.data.name
                            //获取菜单列表
                            jQuery.getJSON("/dish/list",
                                {},
                                function (result) {
                                    if (result!=null&&result.status==0){
                                        app.dishes=result.data;
                                    }
                                    else
                                        alert(result.message)

                                })
                        }
                    })
                },
                //退出登录
                logout(){
                    if (confirm("确认退出？")) {
                        jQuery.getJSON("/user/logout", {},
                            function (result) {
                                if (result != null && result.status == 0) {
                                    app.login.isLogin = false
                                    app.login.inputUsername = ""
                                    alert("退出成功")
                                    location.href=location.href
                                } else
                                    alert(result.message())

                            })
                    }
                },
                //订单查询
                myOrderList(){
                    jQuery.getJSON("/order/list",{},
                    function (result) {
                        if (result!=null&&result.status==0){
                            app.orders=result.data
                            app.status = 'ordersPage'
                        }else
                            alert(result.message)
                    })
                },
                //订单详情
                orderDetail(oid){
                    jQuery.getJSON("/detail/list",{"oid":oid},
                    function (result) {
                        if (result!=null&&result.status==0){
                            app.curOrder=result.data
                            app.showCurOrder=true
                        }else
                            alert(result.message);
                    })
                },
                //某一订单的总价格
                curOrderMoney(){
                    var sum=0;
                    app.curOrder.forEach(item=>{
                        sum+=item.dish.price;
                    })
                    return sum;
                }
            },
            computed: {
                // 点餐的个数
                selectedDishCount() {
                    let count = 0;
                    this.dishes.forEach(dish => {
                        if (dish.isSelected) {
                            count++;
                        }
                    });
                    return count;
                },
                // 计算下单的菜品总价
                selectedDishPrice() {
                    let price = 0;
                    this.dishes.forEach(dish => {
                        if (dish.isSelected) {
                            price += dish.price;
                        }
                    })
                    return price;
                }
            },
            vuetify: new Vuetify(),
        });
        app.isLogin()
    </script>
</body>

</html>